<template>
  <div class="edit-container">
    <div class="user-box">
      <div class="user-title">{{ userInfo.doctor_name }}</div>
      <div class="user-introduce">
        <p class="jor">
          <span>{{ userInfo.job }}</span>
          <!-- <span>主治医生</span> -->
        </p>
        <!-- <p>
          <span>三甲</span>
          <span>中山大学附属医院</span>
        </p> -->
        <p class="dsc">
          {{ userInfo.desc }}
        </p>
        <!-- <p>
          <span><em>99%</em>综合好评</span>
          <span><em>1.2万</em>挂号量</span>
          <span><em>600万</em>问诊量</span>
        </p> -->
      </div>
      <!-- 定位 -->
      <div class="posi-div">
        <el-image
          class="mb-10"
          style="width: 100px; height: 100px"
          :src="userInfo.avatar"
          fit="contain"
        ></el-image>
        <el-button type="primary" @click="showDialog = true">修改</el-button>
      </div>
    </div>
    <!-- 擅长方向 -->
    <card title="擅长方向">
      <div class="job-content">
        {{ userInfo.be_good_at }}
      </div>
    </card>
    <!-- 相关视频 -->
    <card :title="typeid == '1' ? '相关文章' : '相关视频'" v-model="typeid">
      <div style="height: 30px"></div>
      <el-row :gutter="20" v-if="list.length">
        <el-col :span="6" v-for="item in list" :key="item.id">
          <div class="grid-content bg-purple cp">
            <el-image :src="item.cover_img[0]" fit="cover"></el-image>
            <p>{{ item.title }}</p>
          </div>
        </el-col>
      </el-row>
      <template v-else>
        <el-empty :image-size="200"></el-empty>
      </template>
    </card>
    <el-pagination
      class="text-center pagination"
      :current-page="page"
      background
      :page-size="perpage"
      layout="prev, pager, next"
      @current-change="changePage"
      :hide-on-single-page="true"
      :total="total"
    >
    </el-pagination>
    <editDialog
      v-model:showDialog="showDialog"
      :userInfo="userInfo"
    ></editDialog>
  </div>
</template>

<script lang="ts">
import { computed, reactive, toRefs, watch, defineComponent } from 'vue'
import { useStore } from 'vuex'
import { ArticleList } from '@/service/api/articleVideo'
import card from './cpns/card.vue'
import editDialog from './cpns/editDialog.vue'
export default defineComponent({
  name: 'edit',
  components: {
    card,
    editDialog
  },
  setup() {
    const store = useStore()
    const userInfo = computed(() => store.state.user.userInfo)

    const state = reactive({
      showDialog: false,
      typeid: '1',
      page: 1,
      perpage: 8,
      list: [],
      total: 0
    })
    watch(
      () => state.typeid,
      () => {
        resetPage()
        ajaxGetData()
      }
    )
    /**
     * 重置参数
     */
    const resetPage = () => {
      state.list = []
      state.page = 1
    }
    /**
     * 改变页码
     */
    const changePage = (pagenum: number) => {
      state.page = pagenum
      ajaxGetData()
    }
    /**
     * 获取文章/视频列表
     */
    const ajaxGetData = () => {
      let postData = {
        typeid: state.typeid,
        page: state.page,
        perpage: state.perpage
      }
      ArticleList(postData).then((res) => {
        console.log(res)
        if (res.code == 200) {
          state.list = res.data.items
          state.total = res.data.total
        }
      })
    }
    return {
      ...toRefs(state),
      userInfo,
      changePage
    }
  }
})
</script>

<style lang="less" scoped>
.edit-container {
  background-color: #fff;
  padding: 58px 217px 0 107px;
  .user-box {
    position: relative;
    .user-introduce {
      width: 1328px;
      color: #666;
      p {
        font-size: 25px;
        line-height: 44px;
        span {
          margin-right: 30px;
          em {
            color: #333;
          }
        }
      }
      .dsc {
        margin-bottom: 10px;
      }
    }
    .user-title {
      color: #1f1f1f;
      font-size: 50px;
      margin-bottom: 51px;
    }
    .posi-div {
      position: absolute;
      top: 0;
      right: 0;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
    }
  }
  .job-content {
    margin-top: 30px;
    color: #666;
    font-size: 25px;
  }
  .grid-content {
    height: 410px;
    p {
      margin-top: 10px;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap;
      font-size: 28px;
      color: #1f1f1f;
    }
  }
}
</style>
